<template>
  <div>
    <el-select class="inline-block" v-model="currentValue" placeholder="结算方式">
      <el-option :label="item.label" :value="item.value" v-for="(item,index) in list" :key="index">
        {{item.label}}
      </el-option>
    </el-select>
    <span v-if="currentValue === '7'" class="ml10">现付</span>
    <template v-if="['1','7'].includes(currentValue)">
      <el-input
        class="inline-block ml10"
        :value="money1"
        @input="limitInput($event, 'money1')"
        clearable
        style="width:100px"
        placeholder="金额"
      />元
    </template>
    <span v-if="currentValue === '7'" class="ml10">到付</span>
    <template v-if="['2','7'].includes(currentValue)">
      <el-input
        class="inline-block ml10"
        :value="money2"
        @input="limitInput($event, 'money2')"
        clearable
        style="width:100px"
        placeholder="金额"
      />元
    </template>
    <span v-if="currentValue === '7'" class="ml10">欠付</span>
    <template v-if="['3','7'].includes(currentValue)">
      <el-input
        class="inline-block ml10"
        :value="money3"
        @input="limitInput($event, 'money3')"
        clearable
        style="width:100px"
        placeholder="金额"
      />元
    </template>
    <span v-if="currentValue === '7'" class="ml10">回单付</span>
    <template v-if="['4','7'].includes(currentValue)">
      <el-input
        class="inline-block ml10"
        :value="money4"
        @input="limitInput($event, 'money4')"
        clearable
        style="width:100px"
        placeholder="金额"
      />元
    </template>
    <span v-if="currentValue === '7'" class="ml10">月结</span>
    <template v-if="['5','7'].includes(currentValue)">
      <el-input
        class="inline-block ml10"
        :value="money5"
        @input="limitInput($event, 'money5')"
        clearable
        style="width:100px"
        placeholder="金额"
      />元
      <el-autocomplete
        style="width:100px"
        :value="day"
        @input="limitInput($event,'day')"
        :fetch-suggestions="querySearch"
        placeholder="天数"
      />天
    </template>
    <span v-if="currentValue === '7'" class="ml10">分段付</span>
    <template v-if="['6', '7'].includes(currentValue)">
      <el-input
        class="inline-block ml10"
        :value="money6"
        @input="limitInput($event, 'money6')"
        clearable
        style="width:100px"
        placeholder="金额"
      />元
    </template>
  </div>
</template>

<script>
export default {
  name: "settlementMethod",
  components: {
  },
  props: {
    day:{
      type: [Number,String],
      default: undefined
    },
    money1:{
      type: [Number,String],
      default: undefined
    },
    money2:{
      type: [Number,String],
      default: undefined
    },
    money3:{
      type: [Number,String],
      default: undefined
    },
    money4:{
      type: [Number,String],
      default: undefined
    },
    money5:{
      type: [Number,String],
      default: undefined
    },
    money6:{
      type: [Number,String],
      default: undefined
    },
    value:{
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      currentValue: this.value,
      list: [
        {
          value: '1',
          label: '现付'
        },
        {
          value: '2',
          label: '到付'
        },
        {
          value: '3',
          label: '欠付'
        },
        {
          value: '4',
          label: '回单付'
        },
        {
          value: '5',
          label: '月结（按7天、15天、30天、45天、60天）'
        },
        {
          value: '6',
          label: '分段付'
        },
        {
          value: '7',
          label: '混合付'
        }
      ],
      restaurants: [],
    };
  },
  watch: {
    value: {
      handler(val) {
        this.currentValue = val
      },
    },
    currentValue: {
      handler(val) {
        this.$emit('input', val)
      },
    },
  },
  created() {
    this.restaurants = this.loadAll()
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.value.indexOf(queryString) === 0;
      };
    },
    loadAll() {
      return [
        {
          value: '7',
          label: '7天'    
        },
        {
          value: '15',
          label: '15天'    
        },
        {
          value: '30',
          label: '30天'    
        },
        {
          value: '45',
          label: '45天'    
        },
        {
          value: '60',
          label: '60天'    
        }
      ]
    },
    limitInput(value,name) {
      const val = ('' + value) // 第一步：转成字符串
            .replace(/[^\d]/g, "") // 只能输入数字
            .replace(/^0+(\d)/, "$1"); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
      this.$emit(`update:${name}`,val)
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
